<div class="trend-container">
  <aside class="trend-aside">
    <app-device-tag-selector fxFlexFill
                             [deviceCategories]="deviceCategories"
                             [farmCategory]="farmCategory"
                             [multipleFarm]="true"
                             [tagSet]="'01'"
                             [selectTages]="codeTags"
                             [choiceDeviceCount]="deviceCountLimit"
                             [choiceTagCount]="5"
                             [includeTagSelector]="true"
                             (selectedTagsChange)="selectedTagsChange($event)"
                             (selectedDevicesChange)="onSelectedDevicesChange($event)">
    </app-device-tag-selector>
  </aside>
  <section class="trend-main">
    <header class="trend-main-header">
      <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
        实时趋势
      </span>
      <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
        历史趋势
      </span>
    </header>
    <section class="trend-main-section">
      <div [ngClass]="{'trend-main-history':true,active:active==0}">
        <div class="flex">
          <section class="canvas-trend">
            <app-echarts class="app-echarts" [isOnlyShowTime]="true"
                         [hasToolbox]="true" [xAxisType]="xAxisType" [legendData]="legendData"
                         [color]="'#35789d'" [tooltip]="tooltip" [seriesData]="seriesData" [max]="1" [min]="0"></app-echarts>
          </section>
        </div>
      </div>
      <div [ngClass]="{'trend-main-history':true,active:active==1}">
        <div class="flex">
          <header class="trend-main-query" fxLayout="row">
            <section>
              起始时间:
              <p-calendar [locale]="en" [(ngModel)]="date" showTime="showTime" hourFormat="24"></p-calendar>
            </section>
            <section>
              结束时间:
              <p-calendar [locale]="en" [(ngModel)]="date2" showTime="showTime" hourFormat="24"></p-calendar>
            </section>
            <form (submit)="onClickSub()" [formGroup]="formGroup">
              时间间隔
              <input type="number" value="5" formControlName="intervalTime" min="1" max="60">
              <select name="" id="" formControlName="intervalType">
                <option value="h">时</option>
                <option value="m" selected>分</option>
              </select>
              <button class="button-trend" (click)="onClickSub()">确定</button>
            </form>
          </header>
          <section class="canvas-trend">
            <app-echarts class="app-echarts" [xAxisType]="xAxisType" [hasToolbox]="true" [legendData]="legendData" [color]="'#35789d'" [tooltip]="historyTooltip" [seriesData]="historySeries" [max]="1"
                         [min]="0"></app-echarts>
          </section>
        </div>
      </div>
    </section>
  </section>
</div>
